<template>
  <div class="introduce">
    <div class="w1200">
      <p class="about-content-title">联系方式</p>
      <div class="about-content-lists">
        <ul class="clear">
          <li>
            <img src="../../../static/about/tel.png" alt="">
            <p>总机</p>
            <p>021-51095987</p>
          </li>
          <li>
            <img src="../../../static/about/huandong.png" alt="">
          </li>
          <li>
            <img src="../../../static/about/fax.png" alt="">
            <p>传真</p>
            <p>021-51580507</p>
          </li>
          <li>
            <img src="../../../static/about/huandong.png" alt="">
          </li>
          <li>
            <img src="../../../static/about/youbian.png" alt="">
            <p>邮编</p>
            <p>200040</p>
          </li>
          <li>
            <img src="../../../static/about/huandong.png" alt="">
          </li>
          <li>
            <img src="../../../static/about/email.png" alt="">
            <p>E-MAIL</p>
            <p><a href="#">tc_tianchen@tcunit.com.cn</a></p>
          </li>
        </ul>
      </div>
      <BMaps></BMaps>
    </div>
  </div>
</template>

<script>
import Headers from '../../components/Headers'
import Foots from '../../components/Foots'
import BMaps from '../../components/BMaps'
export default {
  name: 'introduction',
  components: {
    Headers: Headers,
    Foots: Foots,
    BMaps: BMaps
  },
  data () {
    return {
    }
  }
}
</script>
<style scoped lang="less">
.introduce{
  .w1200{
    background: #fff;
    padding: 83px 153px 123px 139px;
    width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    .about-content-title{
      font-size: 18px;
      color: #333;
      font-weight: bold;
      margin-bottom: 50px;
      text-align: center;
    }
    .about-content-lists{
      margin-top: 68px;
      ul{
        position: relative;
        li{
          float: left;
          width: 25%;
          text-align: center;
          vertical-align: middle;
          &:nth-child(2n){
            position: absolute;
            top: 10px;
            img{
              display: block;
              margin: 0 auto;
              margin-top: 40px;
            }
          }
          &:nth-child(2){
            left: 115px;
          }
          &:nth-child(4){
            left: 339px;
          }
          &:nth-child(6){
            right: 115px;
          }
          img{
            display: block;
            margin: 0 auto;
            margin-bottom: 32px;
          }
          p{
            &:first-child{
              margin-bottom: 14px;
              font-size: 16px;
              color: #666666;
            }
            &:nth-child(2){
              margin-bottom: 14px;
              font-size: 16px;
              color: #666666;
              font-weight: bold;
            }
            a{
              color: #666;
            }
          }
        }
      }
    }
  }
}
</style>